<template>
  <div class="bikes-container">
    <div style="margin-bottom: 20px; margin-top: -20px;">
      <el-button type="primary" @click="dialogFormVisible = true">新增单车</el-button>
      <el-input v-model="Bikenumber" placeholder="单车编号" style="width: 163px; margin-left: 12px;"></el-input>
      <el-select v-model="status" style="width: 163px; margin-left: 12px;" placeholder="单车状态">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 12px;" @click="load">搜索</el-button>
      <el-button type="primary" style="margin-left: 12px;" @click="reset">重置</el-button>
    </div>
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="id" label="ID">
        </el-table-column>
        <el-table-column prop="bikenumber" label="单车编号" header-align="center" align="center" />
        <el-table-column prop="createat" label="创建时间" header-align="center" align="center" />
        <el-table-column prop="lastuseat" label="最后使用时间" header-align="center" align="center" />
        <el-table-column prop="latitude" label="经纬度" header-align="center" align="center">
          <template #default="scope">
            <el-tag>[{{ scope.row.latitude }}, {{ scope.row.longitude }}]</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="batterylevel" label="电池电量" header-align="center" align="center">
          <template #default="scope">
            <el-progress :percentage="scope.row.batterylevel" />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="单车状态" header-align="center" align="center">
          <template #default="scope">
            <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
              inactive-value="0" disabled>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="Operation" header-align="center" align="center">
          <template #default="scope">
            <el-button type="text" size="small" plain @click="updatebike(scope.row)">编辑</el-button>
            <el-button type="text" size="small" plain @click="deletebike(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize"
          layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog title="增加单车" v-model="dialogFormVisible">

      <el-form ref="BikeForm" :model="addBike" label-width="80px">
        <el-form-item label="单车编号">
          <el-input v-model="addBike.bikenumber" placeholder="请输入单车编号" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker type="datetime" v-model="addBike.createat" placeholder="选择日期和时间"
            value-format="YYYY-MM-DD HH:mm:ss" @change="selectChange" />
        </el-form-item>
        <el-form-item label="使用时间">
          <el-date-picker type="datetime" v-model="addBike.lastuseat" placeholder="选择日期和时间"
            value-format="YYYY-MM-DD HH:mm:ss" @change="selectChange" />
        </el-form-item>
        <el-form-item label="经度">
          <el-input v-model="addBike.latitude" placeholder="请输入经度" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="addBike.longitude" placeholder="请输入纬度" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="电池电量">
          <el-input v-model="addBike.batterylevel" placeholder="请输入电池电量" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="addBike.status" placeholder="请输入单车状态" style="width: 220px;" />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="getbikes">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="更新单车" v-model="dialogUpdateVisible">
      <el-form-item label="单车编号" style="margin-left: 12px;">
        <el-input v-model="bikeForm.bikenumber" placeholder="请输入单车编号" style="width: 220px;" />
      </el-form-item>
      <el-form ref="BikeForm" :model="bikeForm" label-width="80px">
        <el-form-item label="创建时间">
          <el-date-picker type="datetime" v-model="bikeForm.createat" placeholder="选择日期和时间"
            value-format="YYYY-MM-DD HH:mm:ss" @change="selectChange" />
        </el-form-item>
        <el-form-item label="使用时间">
          <el-date-picker type="datetime" v-model="bikeForm.lastuseat" placeholder="选择日期和时间"
            value-format="YYYY-MM-DD HH:mm:ss" @change="selectChange" />
        </el-form-item>
        <el-form-item label="经度">
          <el-input v-model="bikeForm.latitude" placeholder="请输入经度" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="bikeForm.longitude" placeholder="请输入纬度" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="电池电量">
          <el-input v-model="bikeForm.batterylevel" placeholder="请输入电池电量" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="bikeForm.status" placeholder="请输入单车状态" style="width: 220px;" />
        </el-form-item>
      </el-form>

      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="UpdateBike">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { addBike, deleBikeById, getBikeList, putBike } from '../../api/bike';

export default {
  name: 'bikes',
  data() {
    return {
      tableData: [],
      pageSize: 5,
      pageNum: 1,
      status: '',
      options: [{
        value: '1',
        label: '可使用单车'
      }, {
        value: '0',
        label: '不可使用单车'
      }],
      total: 0,
      dialogFormVisible: false,
      dialogUpdateVisible: false,
      Bikenumber: '',
      bikeForm: {
        id: '',
        bikenumber: 'Tom',
        createat: '2024-12-27 20:32:29',
        lastuseat: '2024-12-26 00:00:00',
        latitude: '106',
        longitude: '210',
        batterylevel: '50',
        status: '1'
      },
      addBike: {
        bikenumber: '',
        createat: '',
        lastuseat: '',
        latitude: '',
        longitude: '',
        batterylevel: '',
        status: ''
      }
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      getBikeList(this.pageNum, this.pageSize, this.Bikenumber, this.status).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.tableData = res.data.records
          this.total = res.data.total
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    getbikes() {

      addBike(this.addBike).then(res => {
        if (res.code === 200) {
          this.$message.success("增加成功")
          this.load()
        }
      })
      this.dialogFormVisible = false

    },
    deletebike(id) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleBikeById(id).then(res => {
          if (res.code === 200) {
            this.$message.success("删除成功")
            this.load()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    updatebike(Bike) { //点击编辑后触发该方法
      this.dialogUpdateVisible = true
      this.bikeForm.id = Bike.id
      this.bikeForm.bikenumber = Bike.bikenumber
      this.bikeForm.createat = Bike.createat
      this.bikeForm.lastuseat = Bike.lastuseat
      this.bikeForm.latitude = Bike.latitude
      this.bikeForm.longitude = Bike.longitude
      this.bikeForm.batterylevel = Bike.batterylevel
      this.bikeForm.status = Bike.status
    },
    UpdateBike() { //当点击确认后触发该方法
      this.dialogUpdateVisible = false
      putBike(this.bikeForm).then(res => {
        if (res.code === 200) {
          this.$message.success("更新成功")
          this.load()
        }
      })
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    reset() {
      this.status = ''
      this.Bikenumber = ''
      this.load()
    }
  }
}

</script>

<style scoped>
.bikes-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page {
  display: flex;
  margin-top: 10px;
  justify-content: end;
}

.block {
  display: flex;
  justify-content: end;
}
</style>